{% load staticfiles %}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
	<meta name="keywords" content="" />
	<meta name="description" content="" />
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 	<link href="{% static "acacia/img/database_24.ico" %}" rel="icon" type="image/x-ico" />
	<title>Grafiek</title>
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
	<script src="http://code.highcharts.com/highcharts.js"></script>
	{% if theme %}
	<script src="{% static theme %}"></script>
	{% else %}
	<script src="{% static 'themes/gray.js' %}"></script>
	{% endif %}
	<style>
	body, html {
	  height: 100%;
	  margin: 0;
	}
	
	#container {
	  width: 100%;
	  height: 100%;
	}

	</style>
	<script>
		Highcharts.setOptions({
		  lang: {
		  	shortMonths : ["Jan", "Feb", "Mar", "Apr", "Mei", "Jun", "Jul", "Aug", "Sep", "Okt", "Nov", "Dec"],
			months: ["Januari", "Februari", "Maart", "April", "Mei", "Juni",  "Juli", "Augustus", "September", "Oktober", "November", "December"],
			weekdays: ["Zondag", "Maandag", "Dinsdag", "Woensdag", "Donderdag", "Vrijdag", "Zaterdag"],
		  }
		});
	
		function fetchSeries() {
		    $.ajax({
			    url: '/data/get/chart/{{chart.id}}',
			    datatype: "json",
 			    beforeSend: function(hdr) {
 				  	var chart = $('#container').highcharts();
 			    	chart.showLoading("Gegevens ophalen...");
 			    	return true;
 			    },
			    success: function(data) {
				  	var chart = $('#container').highcharts();
				  	$.each(data,function(id,data) {
				  		var series = chart.get(id);
//	 			    	chart.showLoading("Gegevens verversen van " + series.name);
						series.setData(data);
				  	});
			    },
			    error: function(hdr,status,errorThrown) {
			    	alert("Fout tijdens laden van tijdreeks: " + errorThrown);
			    },
 			    complete: function(hdr, status) {
 				  	var chart = $('#container').highcharts();
 			    	chart.hideLoading();
 			    }
		    });
		}
		
		$(function () {
		  var opt = {{options|safe}};
		  opt.chart.events.load = function() {
			  fetchSeries();
			  posx = this.chartWidth - 32;
			  posy = 8;
			  this.renderer.image('/static/acacia/img/fullscreen3.png',posx,posy,16,16)
	 		    .on('click', function() {
		        	window.open('/data/grafiek/{{chart.id}}');
			        //location.href = '/data/grafiek/{{chart.id}}'
			    })
			    .attr({
			        zIndex: 100,
			        title: 'Openen in apart venster'
		    	})
		    	.css({
		        	cursor: 'pointer'
		    	})
		   		.add();
		  }
		  chart = $('#container').highcharts(opt);
		  });
	</script>
</head>
<body>
<div id="container"></div>
</body>
</html>